<template>
  <div class="steps">
    <PMNewConfigBack/>
    <el-steps :active="active" finish-status="success" simple style="margin-top: 20px">
      <el-step title="基本信息"/>
      <el-step title="人员配置"/>
      <el-step title="进度配置"/>
    </el-steps>
    <div class="ConfigFormFirst">
      <el-form
          ref="tableDataRef"
          :model="tableData"
          :rules="rules"
          class="demo-tableData"
          label-width="120px"
          status-icon
          style="width: 100%"
      >
        <el-form-item label="项目名称" prop="name">
          <el-input v-model="tableData.name" autocomplete="off" style="width: 220px" type="text"/>
        </el-form-item>
        <el-form-item label="负责人" prop="head">
          <el-select
              v-model="tableData.head"
              placeholder="请选择负责人"
              style="width: 220px"
          >
            <el-option v-for="head in optionHeads" :key="head.value" :label="head.label" :value="head.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="启动日期" prop="date">
          <el-date-picker
              v-model="tableData.date"
              end-placeholder="End date"
              range-separator="To"
              start-placeholder="Start date"
              type="daterange"
          />
        </el-form-item>
      </el-form>
    </div>
    <el-row gutter="20">
      <el-col :span="18"/>
      <el-col :span="6" style="display: flex">
        <el-button style="margin-top: 12px;flex: 1" type="primary" @click="submitForm(tableDataRef)">下一步</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import {reactive, ref} from 'vue'
import type {FormInstance} from 'element-plus'
import {usePMConfig} from '@/stores/PMConfig'
import {useHeadsStore} from '@/stores/Person/Heads'
import {usePAUserOneStore} from '@/stores/PAUserOne'

const PAUserOneStore = usePAUserOneStore()
const HeadsStore = useHeadsStore()
const PMConfig = usePMConfig()

const date = ref()
const active = ref(0)
const tableDataRef = ref<FormInstance>()

const checkDate = (rule: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error('请输入日期'))
  } else {
    callback()
  }
}

const checkName = (rule: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error('请输入项目名称'))
  } else {
    callback()
  }
}
const checkHead = (rule: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error('请输入负责人名称'))
  } else {
    callback()
  }
}

const tableData = PMConfig
// 下一步规则----表单需填写完毕
const rules = reactive({
  name: [{validator: checkName, trigger: 'blur'}],
  head: [{validator: checkHead, trigger: 'blur'}],
  date: [{validator: checkDate, trigger: 'blur'}]
})
// 提交表单
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      PMConfig.$patch({
        name: tableData.name,
        head: tableData.head,
        startDate: tableData.date[0],
        endDate: tableData.date[1]
      })
      PAUserOneStore.getTableData(tableData.head)
      PMConfig.pushDate()
    } else {
      console.log('error submit!', fields)
    }
  })
}

const optionHeads = HeadsStore.heads

</script>
<style lang="scss" scoped>
.ConfigFormFirst {
  width: 350px;
  margin: 40px;
  height: 540px
}

.el-date-editor.el-input, .el-date-editor.el-input__inner {
  width: 100%;
}

.steps {
  width: 95%;
  height: 40%;
  margin: auto;

  ::v-deep(.el-step__icon) {
    width: 50px;
    height: 50px;
    font-size: 40px;
  }
}
</style>
